<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="keywords" content="HTML,CSS,XML,JavaScript">

    <meta charset="utf-8" />
    <link href="/static/houtai/css/style.css" rel="stylesheet" type="text/css" />
    <!--    引入编辑器的js文件-->
    <!--<script type="text/javascript" src="ckeditor/ckeditor.js"></script>-->
    <script type="text/javascript" src="/static/houtai/js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="/static/houtai/commons/common.js"></script>


    <link rel="stylesheet" type="text/css" href="/static/houtai/css/validate.css"/>
    <script type="text/javascript" src="/static/houtai/js/jquery.validate.js"></script>
    <style type="text/css">
        span{
            display: inline;
        }

        body{

            font:14px/28px "微软雅黑";

        }

        .contact *:focus{outline :none;}

        .contact{

            width: 700px;

            height: auto;

            background: #f6f6f6;

            margin: 40px auto;

            padding: 10px;

        }

        .contact ul {

            width: 650px;

            margin: 0 auto;

        }

        .contact ul li{

            border-bottom: 1px solid #dfdfdf;

            list-style: none;

            padding: 12px;

        }

        .contact ul li label {

            width: 120px;

            display: inline-block;

            float: left;

        }

        .contact ul li input[type=text],.contact ul li input[type=password]{

            width: 220px;

            height: 25px;

            border :1px solid #aaa;

            padding: 3px 8px;

            border-radius: 5px;

        }

        .contact ul li input:focus{

            border-color: #c00;



        }

        .contact ul li input[type=text]{

            transition: padding .25s;

            -o-transition: padding  .25s;

            -moz-transition: padding  .25s;

            -webkit-transition: padding  .25s;

        }

        .contact ul li input[type=password]{

            transition: padding  .25s;

            -o-transition: padding  .25s;

            -moz-transition: padding  .25s;

            -webkit-transition: padding  .25s;

        }

        .contact ul li input:focus{

            padding-right: 70px;

        }

        .btnsubmit{

            position: relative;

            left: 155px;

        }
        .btnsubmit input{
            width: 100px;
            height: 35px;
            background: #3eafe0;
            font-size: 15px;
            color: #fff;
            line-height: 30px;
            margin-right: 40px;
        }

        .tips{

            color: rgba(0, 0, 0, 0.5);

            padding-left: 10px;

        }

        .tips_true,.tips_false{

            padding-left: 10px;

        }

        .tips_true{

            color: green;

        }

        .tips_false{

            color: red;

        }
        .contact ul li{
            border-bottom:none;
        }
        .contact{
            background: none;
        }
    </style>
    <script type="text/javascript">
        //去空格
        function Trim(str)

        {

            return str.replace(/(^\s*)|(\s*$)/g, "");

        }

        //验证名字
        function checkna(){

            na=form1.name.value;

            if( na.length <1 || na.length >12)

            {

                divname.innerHTML='<font class="tips_false">长度是1~12个字符</font>';



            }else{

                divname.innerHTML='<font class="tips_true">输入正确</font>';



            }



        }

        //验证密码 

        function checkpsd1(){

            psd1=form1.pwd.value;

            var flagZM=false ;

            var flagSZ=false ;

            var flagQT=false ;

            if(psd1.length<6 || psd1.length>12){

                divpassword1.innerHTML='<font class="tips_false">长度错误</font>';

            }else

            {

                for(i=0;i < psd1.length;i++)

                {

                    if((psd1.charAt(i) >= 'A' && psd1.charAt(i)<='Z') || (psd1.charAt(i)>='a' && psd1.charAt(i)<='z'))

                    {

                        flagZM=true;

                    }

                    else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')

                    {

                        flagSZ=true;

                    }else

                    {

                        flagQT=true;

                    }

                }

                if(!flagZM||!flagSZ||flagQT){

                    divpassword1.innerHTML='<font class="tips_false">密码必须是字母数字的组合</font>';



                }else{



                    divpassword1.innerHTML='<font class="tips_true">输入正确</font>';



                }



            }

        }

        //验证确认密码 

        function checkpsd2(){

            if(form1.pwd1.value!=form1.pwd1.value) {

                divpassword2.innerHTML='<font class="tips_false">您两次输入的密码不一样</font>';

            } else {
                if(form1.pwd1.value==0){
                    divpassword2.innerHTML='<font class="tips_false">请先输入密码</font>';
                }else{
                    divpassword2.innerHTML='<font class="tips_true">输入正确</font>';
                }


            }

        }



        //验证工作
        function checkwork(){

            na=form1.job.value;

            if( na.length <1 || na.length >12)

            {

                divwork.innerHTML='<font class="tips_false">长度是1~12个字符</font>';



            }else{

                divwork.innerHTML='<font class="tips_true">输入正确</font>';



            }



        }


        //验证年龄
        function checkage(){
            na=form1.age.value;
            if(isNaN(na)==true ||na<0 ||na>150 ||na.length<=0){
                divage.innerHTML='<font class="tips_false">请输入(0~150)之间的数字</font>';
            }
            else {
                divage.innerHTML='<font class="tips_true">输入正确</font>';
            }

        }

        //验证手机号
        function  checkphone() {
            na=form1.mobileNumber.value;
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(na))
            {
                divphone.innerHTML='<font class="tips_false">请输入有效的手机号码！</font>';
            }
            else {
                divphone.innerHTML='<font class="tips_true">输入正确</font>';
            }
        }

        //验证微信好
        function checkweixin(){
            na=form1.weixinNumber.value;
            var reg=/^[a-zA-Z\d_]{5,}$/;
            if(!reg.test(na)){
                divweixin.innerHTML='<font class="tips_false">请输入有效的微信号！</font>';
            }
            else{
                divweixin.innerHTML='<font class="tips_true">输入正确</font>';
            }
        }



    </script>
</head>
<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">用户添加</a></li>
    </ul>
</div>
<div class="formbody">
    <div class="formtitle"><span>用户添加</span></div>
    <div class="contact" >

        <form name="form1" method="post" action="/sysUser/addSysUser">

            <ul>

                <li>

                    <label>用户名：</label>

                    <input type="text" name="name" placeholder="用户名"  onblur="checkna()" required/><span class="tips" id="divname">长度1~12个字符</span>

                </li>

                <li>

                    <label>密码：</label>

                    <input type="password" name="pwd" placeholder="密码" onblur="checkpsd1()" required/><span class="tips" id="divpassword1">密码必须由字母和数字组成</span>

                </li>

                <li>

                    <label>确认密码：</label>

                    <input type="password" name="pwd1" placeholder="再次输入密码" onblur="checkpsd2()" required/><span class="tips" id="divpassword2">两次密码需要相同</span>

                </li>

                <li>

                    <label>工作：</label>

                    <input type="text" name="job" placeholder="工作" onblur="checkwork()" required/><span class="tips" id="divwork">长度是1~12个字符</span>

                </li>

                <li>

                    <label>年龄：</label>

                    <input type="text" name="age" placeholder="年龄" onblur="checkage()"  min="0" max="150" required/><span class="tips" id="divage">0-150之间的数字</span>

                </li>

                <li>

                    <label>手机号：</label>

                    <input type="text" name="mobileNumber" placeholder="手机号" onblur="checkphone()" required/><span class="tips" id="divphone">请输入手机号</span>

                </li>

                <li>

                    <label>微信号：</label>

                    <input type="text" name="weixinNumber" placeholder="微信号" onblur="checkweixin()" required/><span class="tips" id="divweixin">5位以上</span>

                </li>

            </ul>

            <b class="btnsubmit"><input type="submit" value="提交"/>

                <input type="reset" value="取消"/></b>

        </form>

    </div>

</div>

</body>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            alert("添加成功！");
        });
    });
</script>
<%@ include file="foot.jsp"%>


